<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
<head>
    <title>Title</title>
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="js/jquery-1.8.3.js"></script>
</head>
<body>
    <form class="layui-form" style="display: none" id="userForm" lay-filter="form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">手机号:</label>
            <div class="layui-input-inline">
                <input type="text" name="telphone" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户密码:</label>
            <div class="layui-input-inline">
                <input type="password" name="password" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">真实名称:</label>
            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名称:</label>
            <div class="layui-input-inline">
                <input type="text" name="nickName" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">省份:</label>
            <div class="layui-input-inline">
                <input type="text" name="province" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">城市:</label>
            <div class="layui-input-inline">
                <input type="text" name="city" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <button type="button" class="layui-btn" id="upload">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片名称:</label>
            <div class="layui-input-inline">
                <input type="text" id="image" name="image" readonly placeholder="请先选择图片" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上师选择:</label>
            <div class="layui-input-block">
                <select name="gid" lay-filter="gid" id="gid" >

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户状态:</label>
            <div class="layui-input-block">
                <select name="status" lay-filter="status">
                    <option value="0">未激活</option>
                    <option value="1">正常用户</option>
                    <option value="2">冻结</option>
                    <option value="3">已删除</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别选择:</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="男" title="男" checked>
                <input type="radio" name="sex" value="女" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发布日期:</label>
            <div class="layui-input-inline">
                <input type="text" name="date" id="date" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">个性签名:</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" id="autograph" name="autograph" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
        <%--模糊查询 输入框及按钮  --%>
        <div class="layui-form-item">
            <label class="layui-form-label">选择上师查询:</label>
            <div class="layui-input-block">
                <select name="gid" lay-filter="gid" id="select" >

                </select>
            </div>
        </div>

        <table id="user" lay-filter="user"></table>

        <script type="text/html" id="img">
            <img src="{{d.image}}"/>
        </script>
        <script type="text/html" id="gName">
            {{ d.guru.name }}
        </script>
        <script type="text/html" id="status">
            {{# if(d.status==0){        }}
                未激活
            {{# }else if(d.status==1){  }}
                正常用户
            {{# }else if(d.status==2){  }}
                冻结
            {{# }else if(d.status==3){  }}
                已删除
            {{# }                       }}
        </script>
        <script type="text/html" id="head">
            <a class="layui-btn layui-btn-lg" lay-event="insert">添加</a>
        </script>
        <script type="text/html" id="body">
            <a class="layui-btn layui-btn-xs layui-form-danger" lay-event="delete">删除(状态改变)</a>
            <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
        </script>
        <script>
            layui.use(['table','form','laydate','upload'],function (obj) {
                var table = layui.table;
                var form = layui.form;
                var laydate = layui.laydate;
                var upload = layui.upload;
                //执行一个laydate实例
                laydate.render({
                    elem: '#date' //指定元素
                });
                //执行实例  文件上传
                var uploadInst = upload.render({
                    elem: '#upload' //绑定元素
                    ,url: 'article/upload' //上传接口
                    ,done: function(res){
                        //上传完毕回调
                        $("#image").val(res.imageName);
                    }
                    ,error: function(){
                        //请求异常回调
                    }
                });
                table.render({
                    elem:"#user",
                    page:true,
                    url:"user/selectAllUser",
                    limit:3,
                    limits:[3,5,7],
                    toolbar:"#head",
                    cols:[[
                        {title:"编号",field:"id"},
                        {title:"真实名称",field:"name"},
                        {title:"电话号码",field:"telphone"},
                        {title:"密码",field:"password"},
                        {title:"昵称",field:"nickName"},
                        {title:"图片",templet:"#img"},
                        {title:"签名",field:"autograph"},
                        {title:"跟随上师",templet:"#gName"},
                        {title:"发布时间",field:"date"},
                        {title:"性别",field:"sex"},
                        {title:"所在省份",field:"province"},
                        {title:"所在城市",field:"city"},
                        {title:"状态",templet:"#status"},
                        {title:"操作栏",toolbar:"#body"},
                    ]]
                })
                // ------------模糊查询------------------------
                $("#select").change(function () {
                    table.reload('user',{
                        where:{
                            gid:$("#select").val()
                        },
                        page:{
                            curr:1
                        }
                    })

                })
        //  ----------  表格体时间绑定---------------------
            table.on('tool(user)',function (obj) {
                if(obj.event == 'delete'){
                    console.log(11111)
                    layer.confirm('确定要删除?',function (index) {
                        console.log(22222)
                        $.ajax({
                            url:"user/deleteUser",
                            data:"id="+obj.data.id+"&status="+obj.data.status,
                            dataType:"json",
                            success:function (result) {
                                if(result.isDelete){
                                    layer.close(index);
                                    table.reload('user');
                                }
                            },
                            error:function () {
                                console.log(3333)
                            }
                        })
                    })
                }else if(obj.event == 'update'){
                    $.ajax({
                        url:"user/selectOneUser",
                        data:"id="+obj.data.id,
                        dataType:"json",
                        success:function (result) {
                            form.val('form',{
                                id:result.id,
                                name:result.name,
                                image:result.image,
                                autograph:result.autograph,
                                gid:result.gid,
                                date:result.date,
                                status:result.status,
                                telphone:result.telphone,
                                password:result.password,
                                nickName:result.nickName,
                                province:result.province,
                                city:result.city,
                                sex:result.sex
                            })
                        }
                    })
                    layer.open({
                        title:"修改页面",
                        type:1,
                        content:$("#userForm"),
                        area:['350px','400px']
                    })
                    form.on('submit(submit)',function () {
                        $.ajax({
                            url:"user/updateUser",
                            data:$("#userForm").serialize(),
                            dataType:"json",
                            success:function (result) {
                                if(result.isUpdate){
                                    layer.closeAll();
                                    table.reload('user');
                                    $("#userForm")[0].reset();
                                }
                            }
                        })
                        return false;
                    })
                }
            })
            //------------------表格头事件绑定---------------------------------
            table.on('toolbar(user)',function (obj) {
                if(obj.event == 'insert'){
                    layer.open({
                        title:"添加页面",
                        type:1,
                        content:$("#userForm"),
                        area:['350px','400px']
                    })
                    form.on('submit(submit)',function () {
                        $.ajax({
                            url:"user/insertUser",
                            data:$("#userForm").serialize(),
                            dataType:"json",
                            success:function (result) {
                                if(result.isAdd){
                                    layer.closeAll();
                                    table.reload('user');
                                    $("#userForm")[0].reset();
                                }
                            }
                        })
                        return false;
                    })
                }
            })
                //---------------查询所有大师并赋值给下拉框-----------------------------
                $.ajax({
                    url:"guru/selectGuru",
                    dataType:"json",
                    success:function (result) {
                        var s = '';
                        $(result).each(function (index, obj) {
                            s+="<option value='"+obj.id+"'>"+obj.name+"</option>"
                        })
                        $("#gid").html(s);
                        s+="<option value=\"\" selected>请选择指定上师查询</option>"
                        $("#select").html(s);
                        //重新渲染表单下拉框页面
                        form.render('select')
                        return s;
                    }
                })
            })


        </script>
</body>
</html>
